<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目详情</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .detail-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .project-header {
            background: white;
            border-radius: 8px;
            padding: 30px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .project-title {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .project-status {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .status-active { background: #d4edda; color: #155724; }
        .status-completed { background: #cce5ff; color: #004085; }
        .status-paused { background: #fff3cd; color: #856404; }
        .project-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .info-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
        }
        .progress-bar {
            width: 100%;
            height: 12px;
            background: #e9ecef;
            border-radius: 6px;
            overflow: hidden;
            margin: 10px 0;
        }
        .progress-fill {
            height: 100%;
            background: #007bff;
        }
        .sections-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        .section-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .section-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 15px;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        .module-item, .document-item {
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 10px;
        }
        .back-btn {
            background: #6c757d;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            margin-bottom: 20px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="detail-container">
        <a href="projects.html" class="back-btn">← 返回项目列表</a>
        
        <div id="projectContent">
            <div class="loading">加载中...</div>
        </div>
    </div>

    <script>
        let projectId = null;

        document.addEventListener('DOMContentLoaded', function() {
            checkAuthAndLoadProject();
        });

        function checkAuthAndLoadProject() {
            const token = localStorage.getItem('authToken');
            const userInfo = localStorage.getItem('userInfo');

            if (!token || !userInfo) {
                alert('请先登录');
                window.location.href = 'login.html';
                return;
            }

            const urlParams = new URLSearchParams(window.location.search);
            projectId = urlParams.get('id');

            if (!projectId) {
                document.getElementById('projectContent').innerHTML = '<div class="error">项目ID不能为空</div>';
                return;
            }

            loadProjectDetail();
        }

        async function loadProjectDetail() {
            const token = localStorage.getItem('authToken');
            const projectContent = document.getElementById('projectContent');

            try {
                projectContent.innerHTML = '<div class="loading">加载中...</div>';

                const response = await fetch(`/projects/${projectId}`, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });

                const data = await response.json();

                if (data.code === 200) {
                    displayProjectDetail(data.data);
                } else {
                    projectContent.innerHTML = `<div class="error">获取项目详情失败: ${data.message}</div>`;
                }
            } catch (error) {
                console.error('加载项目详情失败:', error);
                projectContent.innerHTML = '<div class="error">网络错误，请重试</div>';
            }
        }

        function displayProjectDetail(project) {
            const projectContent = document.getElementById('projectContent');

            const projectHtml = `
                <div class="project-header">
                    <h1 class="project-title">${project.name}</h1>
                    <span class="project-status status-${project.status}">${getStatusText(project.status)}</span>
                    <p>${project.description}</p>
                    
                    <div class="project-info-grid">
                        <div class="info-card">
                            <strong>项目负责人:</strong> ${project.pm_name}
                        </div>
                        <div class="info-card">
                            <strong>前端负责人:</strong> ${project.frontend_name}
                        </div>
                        <div class="info-card">
                            <strong>后端负责人:</strong> ${project.backend_name}
                        </div>
                        <div class="info-card">
                            <strong>开始日期:</strong> ${project.start_date}
                        </div>
                        <div class="info-card">
                            <strong>结束日期:</strong> ${project.end_date}
                        </div>
                        <div class="info-card">
                            <strong>Git仓库:</strong> <a href="${project.git_url}" target="_blank">${project.git_url}</a>
                        </div>
                    </div>

                    <h3>项目进度</h3>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: ${project.progress}%"></div>
                    </div>
                    <p>当前进度: ${project.progress}%</p>
                </div>

                <div class="sections-grid">
                    <div class="section-card">
                        <h2 class="section-title">模块列表</h2>
                        ${project.modules.map(module => `
                            <div class="module-item">
                                <h4>${module.name}</h4>
                                <p>${module.description}</p>
                                <p>类型: ${module.type} | 状态: ${getStatusText(module.status)} | 进度: ${module.progress}%</p>
                                <p>时间: ${module.start_date} - ${module.end_date}</p>
                                ${module.completed_at ? `<p>完成时间: ${module.completed_at}</p>` : ''}
                            </div>
                        `).join('')}
                    </div>

                    <div class="section-card">
                        <h2 class="section-title">文档列表</h2>
                        ${project.documents.map(doc => `
                            <div class="document-item">
                                <h4><a href="${doc.url}" target="_blank">${doc.name}</a></h4>
                                <p>类型: ${doc.type} | 创建者: ${doc.creator_name}</p>
                                <p>创建: ${doc.created_at} | 更新: ${doc.updated_at}</p>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;

            projectContent.innerHTML = projectHtml;
        }

        function getStatusText(status) {
            const statusTexts = {
                'active': '进行中',
                'completed': '已完成',
                'paused': '已暂停'
            };
            return statusTexts[status] || status;
        }
    </script>
</body>
</html> 